solution-card 轻卡片列表

{
    "navigationBarTitleText": "",
    "usingComponents": {
        "iov-solution-card": "iov-ui/lib/solution-card"
    },
    "window": {
        "left": 0,
        "top": 0,
        "right": 580,
        "bottom": 960,
        "showStyle":1
    }
}

<iovauto-vsl bindOnRefresh="onRefresh" class="container">
    <scroll-view
        class="scroll-view"
        bindscroll="onScroll"
        scroll-y
        scroll-top="{= scrollTop =}"
        scroll-with-animation="true"
    >   
        <iov-solution-card
            s-for="item,index in cardData"
            data="{{ item }}"
            voice-url="{{ item.url || item.clickUrl }}"
            voice-index="{{ index + 1 }}"
            bindvsl="onChange"
            bindchange="onChange"
            index="{{ index + 1 }}"
            type="parking"
            adapter="{{ adapter }}"
            voiceText="{{ voiceText }}"
            openIndex="{{ openIndex }}"
            tagType="{{['其它','未知','紧张','较少','充足']}}"
        >
        </iov-solution-card>
        <view s-if="openIndex" style="height: 522/100rem;"></view>
    </scroll-view>
</iovauto-vsl>

/* globals Page, swan */
import mock from './mock';
import extendPage from '../../../utils/basePage';
Page(extendPage({
    data: {
        voiceText: ['导航'],
        scrollTop: 0,
        adapter: {id: 'parkingLotId', name: 'parkingName', total: 'totalNumber'},
        cardData: null,
        openIndex: -1
    },
    onInit(query) {
        this.setQuery(query);
    },
    onRefresh(query) {
        this.setQuery(query);
    },
    setQuery(query) {
        // mock 数据
        // query = mock.nav;
        // query = mock.select;
        if (!query || Object.keys(query) <= 0) {
            return;
        }
        // eslint-disable-next-line no-param-reassign
        const data = JSON.parse(query.data).data;
        if (!data || Object.keys(data) <= 0) {
            return;
        }
        // cmd [select:选择第几个 nav:导航第几个 parkingList:列表]
        if (data.cmd && this[data.cmd]) {
            const {parkingLotId} = data;
            const list = data.list || this.data.cardData || [];
            const index = list.findIndex(item => {
                return parkingLotId === item.parkingLotId;
            });
            this[data.cmd](index, list);
        }
    },
    parkingList(index, list) {
        if (!(index > 0)) {
            list[0].open = true;
        }
        this.setData({
            openIndex: 0,
            cardData: list
        });
        this.addMarker();
    },
    nav(index, list) {
        const currList = list[index];
        const {latitude, longitude, address} = currList;
        swan.iovauto.openNavigation && swan.iovauto.openNavigation(latitude + '', longitude + '', address);
    },
    select(index) {
        this.onChange({detail: {value: index}});
    },
    onChange(e) {
        console.log('onChange...', e);
    },
    onScroll() {
        console.log('onScroll...', e);
    },
    // 地图扎点
    addMarker(e) {
        const {cardData, openIndex} = this.data;
        let i = cardData.length - openIndex < 4 ? cardData.length - 4 : openIndex;
        let markerData = cardData.slice(i, i + 4);
        markerData = markerData.map((item, index) => {
            return {
                poiTag: index + 1,
                name: item.parkingName,
                address: item.address,
                longitude: item.longitude,
                latitude: item.latitude
            };
        });
        swan.iovauto.addMarker
            && swan.iovauto.addMarker({
                data: {
                    list: markerData
                }
            });
    }
}));

/*eslint-disable*/
const list = [
    {
        resources: '0',
        remainingStatus: 4,
        remainingNumber: 0,
        totalNumber: 200,
        longitude: '114.23456',
        latitude: '22.23456',
        parkingLotId: 'id1234',
        parkingName: '1onInit测试停车场',
        avgCost: '2元/小时',
        address: '深圳市南山区百度国际附近',
        distance: '245.77m',
        feeStrategy: [],
        url: 'dumi://xxxxxxxxxx'
    }
];
export default {
    list,
    parkingList: {
        data:
            '{"code":1,"msg":"success","log_id":"","data":{"cmd":"parkingList","appkey":"33Tk2jep4GiKEEqvaHSmgc17j4wz0oI9","path":"/pages/card/list","list": ' +
            JSON.stringify(list) +
            '}}'
    },
    select: {
        data: '{"code":1,"msg":"success","log_id":"","data":{"cmd":"select","appkey":"33Tk2jep4GiKEEqvaHSmgc17j4wz0oI9","path":"/pages/card/list","parkingLotId":"id144238"}}'
    },
    nav: {
        data: '{"code":1,"msg":"success","log_id":"","data":{"cmd":"nav","appkey":"33Tk2jep4GiKEEqvaHSmgc17j4wz0oI9","path":"/pages/card/list","parkingLotId":"id1235"}}'
    }
};